<template>
  <div class="editTopics">
    <div class="register registerTwo">
      <img class="registerbg" src="../assets/registerbg.png">
      <text-header :title="title" :bgcolor="'rgba(1,1,1,0)'" :topath="'/my'" class="textHeader"></text-header>
      <div class="register-topic">
        <div class="topicList">
          <div :class="{'topicItem':true,'selected':selectedTopic.indexOf(item.id)>=0}" v-for="(item,i) in topicList" :key="i" @click="selectTopic(item.id)">
            {{item.healthName}}
          </div>
        </div>
      </div>
      <!-- <div class="updatepw-con" v-if="showFlag=='1'">
        <yd-cell-item class="inputItem currentPhone">
            <input v-model="password" type="password" slot="right" placeholder="输入新密码英文加数字不少于八位"> -->
            <!-- <span class="phoneNumber" slot="right">{{currentPhone}}</span> -->
            <!-- <input class="" type="text" slot="right" placeholder="点击输入验证码"> -->
        <!-- </yd-cell-item>
        <yd-cell-item class="inputItem phoneCode">
              <input v-model="passwordagain" type="password" slot="right" placeholder="确认密码">
        </yd-cell-item>
      </div> -->
      <yd-button class="nextBtn" size="large" type="primary" @click.native="nextBtn">完成</yd-button>
    </div>
  </div>
  
</template>

<script>
import textHeader from "../components/TextHeader";
import noiseImg from "../assets/noise.gif";
import URL from "../until/urlConfig.js";
import until from "../until/until.js";
import md5 from 'js-md5';
export default {
  name:'editTopics',
  components: {
    textHeader
  },
  data() {
    return {
      title:'选择感兴趣的话题',
      topicList:[],
      selectedTopic:[]
    };
  },
  methods: {
    selectTopic(id){
      if(this.selectedTopic.indexOf(id)>=0){
        this.selectedTopic.splice(this.selectedTopic.indexOf(id),1);
      }else{
        this.selectedTopic.push(id);
      }
    },
    nextBtn(){
        
    },
    getTopicList(){
      this.$http.get(URL.getTopicList)
      .then(res=>{
        this.topicList = res.data;
      })
    }
  },
  mounted() {
    // this.initUserInfo();
    this.getTopicList();
  }
};
</script>
<style lang="scss">
@import "../style/public.scss";
.editTopics{
  .register {
    height:100%;
    .registerbg{
      height:100%;
      width:100%;
      position:absolute;
      top:0;
      left:0;
    }
    .nextBtn{
      font-family:'Microsoft Yahei';
      width:calc(100% - 2.56rem);
      margin:rem(90) auto 0;
      font-size:rem(32);
      height:rem(76);
      border-radius:rem(38);
      color:$defaultcolor;
      &.yd-btn-primary{
        background-color:#fff;
      }
      line-height:rem(76);
      font-weight:100;
    }
  }
  .registerTwo{
    .yd-navbar-item{
      flex:none;
    }
    .nextBtn{
      margin:rem(48) auto 0;
    }
    .register-topic{
      height:rem(804);
      .topicList{
        width:100%;
        display:flex;
        padding:0 rem(96);
        align-content: flex-start;
        position:absolute;
        height:rem(804);
        overflow:auto;
        flex-wrap:wrap;
        justify-content:space-between;
        .topicItem{
          width:calc(50% - 0.2rem);
          z-index:6;
          color:#fff;
          height:rem(78);
          margin-top:rem(60);
          font-size:rem(32);
          line-height:rem(76);
          border-radius:rem(39);
          border:rem(2) solid rgba(255,255,255,.3);
          &.selected{
            background:#22a114;
          }
        }
      }
      
      z-index:6;
    }
  }
}

</style>